import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Tabs, Button } from 'antd'
const TabPane = Tabs.TabPane;
import SlideFrame from 'components/slide-frame'
import EmployeeCredit from 'containers/credit-setting/credit-management/employee-credit'
import CreditEvent from 'containers/credit-setting/credit-management/credit-event'
import CreditEventDetail from 'containers/credit-setting/credit-management/credit-event-detail'

class CreditManagement extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      nowUser: {},
      tabs: [
        {key: 'employee', name: messages('credit-setting.key22')/*员工信用管理*/},
        {key: 'event', name: messages('credit-setting.key23')/*信用事件管理*/}
      ],
      nowTab: 'employee',
      showSlideFrame: false,
      nowData: {},
      refreshFlag: true
    }
  }

  handleCloseSlideFrame = result => {
    this.setState({showSlideFrame : false});
    if(result){
      this.setState({ refreshFlag: false }, () => {
        this.setState({ refreshFlag: true, nowTab: result })
      })
    }
  };

  handleCreate = () => {
    this.setState({
      nowData: {},
      showSlideFrame: true
    })
  };

  handleEditEvent = data => {
    this.setState({
      nowData: data,
      showSlideFrame: true
    })
  };

  handleEditEmployee = data => {
    this.setState({
      nowData: data,
      showSlideFrame: true
    })
  };

  handleSelectEmployee = record => {
    this.setState({
      nowUser: { userOID: record.userOID, fullName: record.fullName, setOfBooksId: record.setOfBooksId },
      nowTab: 'event'
    })
  };

  renderComponent = () => {
    const { nowUser, nowTab } = this.state;
    switch(nowTab){
      case 'employee':
        return <EmployeeCredit onEdit={this.handleEditEmployee}
                               onSelectEmployee={this.handleSelectEmployee}/>;
      case 'event':
        return <CreditEvent onCreate={this.handleCreate}
                            onEdit={this.handleEditEvent}
                            nowUser={nowUser}/>
    }
  };

  render() {
    const { tabs, nowData, showSlideFrame, refreshFlag, nowTab } = this.state;
    return (
      <div>
        <div className="tabs-info">
          <Tabs onChange={nowTab => this.setState({ nowTab })} type="card" activeKey={nowTab}>
            {tabs.map(tab =>
              <TabPane tab={tab.name} key={tab.key}/>
            )}
          </Tabs>
          {refreshFlag && this.renderComponent()}
        </div>
        <SlideFrame
          content={CreditEventDetail}
          onClose={() => this.setState({ showSlideFrame: false })}
          afterClose={this.handleCloseSlideFrame}
          show={showSlideFrame}
          title={messages('credit-setting.key24')/*信用事件*/}
          params={{
            data: nowData,
            nowTab,
            showSlideFrame
          }}
        />
      </div>
    )
  }
}

CreditManagement.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    user: state.login.user
  }
}

export default connect(mapStateToProps)(CreditManagement)
